<template>
  <div class="portfolio">
    <h2>我的投资组合</h2>
    <div v-if="loading" class="loading">加载中...</div>
    <div v-else-if="error" class="error">{{ error }}</div>
    <div v-else>
      <div class="portfolio-summary">
        <div class="summary-item">
          <h3>总资产</h3>
          <p>¥{{ portfolio.totalValue.toFixed(2) }}</p>
        </div>
        <div class="summary-item">
          <h3>现金余额</h3>
          <p>¥{{ portfolio.cashBalance.toFixed(2) }}</p>
        </div>
        <div class="summary-item">
          <h3>持仓股票</h3>
          <p>{{ portfolio.holdings.length }} 只</p>
        </div>
      </div>
      
      <div class="holdings">
        <h3>持仓详情</h3>
        <el-table :data="portfolio.holdings" height="400" style="width: 100%" v-if="portfolio.holdings.length > 0">
          <el-table-column prop="symbol" label="股票代码" min-width="120"></el-table-column>
          <el-table-column prop="name" label="公司名称" min-width="150"></el-table-column>
          <el-table-column prop="quantity" label="持有数量" min-width="120" align="right"></el-table-column>
          <el-table-column label="当前价格" min-width="120" align="right">
            <template #default="scope">
              ¥{{ scope.row.currentPrice.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column label="总价值" min-width="120" align="right">
            <template #default="scope">
              ¥{{ scope.row.totalValue.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column label="盈亏" min-width="180" align="right">
            <template #default="scope">
              <span :class="scope.row.profit >= 0 ? 'profit' : 'loss'">
                ¥{{ scope.row.profit.toFixed(2) }} ({{ scope.row.profitPercentage.toFixed(2) }}%)
              </span>
            </template>
          </el-table-column>
        </el-table>
        <div v-else class="no-holdings">
          <p>暂无持仓股票</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import apiService from '../services/ApiService';

const portfolio = ref({
  totalValue: 0,
  cashBalance: 0,
  holdings: []
});
const loading = ref(false);
const error = ref(null);
const userId = ref(1); // 这里应该从认证信息中获取用户ID

onMounted(async () => {
  await fetchPortfolio();
});

const fetchPortfolio = async () => {
  try {
    loading.value = true;
    error.value = null;
    
    const response = await apiService.getUserPortfolio(userId.value);
    // 修复：检查响应中是否有error属性来判断是否出错
    if (!response || response.error) {
      error.value = response?.error || '获取投资组合失败';
    } else {
      portfolio.value = response.data;
    }
  } catch (err) {
    error.value = '网络错误，请稍后重试';
    console.error('获取投资组合失败:', err);
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.portfolio {
  padding: 20px;
}

.loading, .error {
  text-align: center;
  padding: 20px;
}

.error {
  color: red;
}

.portfolio-summary {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.summary-item {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  flex: 1;
  margin: 0 10px;
  min-width: 150px;
}

.summary-item h3 {
  margin-top: 0;
  color: #666;
}

.summary-item p {
  font-size: 1.5em;
  font-weight: bold;
  margin: 10px 0 0;
}

.holdings h3 {
  margin-top: 30px;
}

.profit {
  color: green;
}

.loss {
  color: red;
}

.no-holdings {
  text-align: center;
  padding: 30px;
  color: #666;
}
</style>